<template>
  <view :class="theme">
    <view class="fixed" style="left: var(--window-left); right: var(--window-right); top: 0;">
      <uv-image width="100%" height="424" src="/static/img/auth/1.png" />
    </view>
    <view class="z-1 bg-[rgba(33,32,46,0.9)] b-rounded-24"
      style="margin: 300rpx 40rpx 40rpx; backdrop-filter: blur(24rpx);">
      <view class="mt-[-150rpx] flex-row items-center">
        <view class="flex-1 mt-150 ml-50 text-48 fw-bold">
          <text>设置</text>
          <text class="mt-6">支付密码</text>
        </view>
        <uv-image width="412" height="412" src="/static/img/auth/2.png" />
      </view>

      <view style="margin: 0 30rpx 50rpx;">
        <view class="mt-40 text-28 h-100 flex-row items-center pl-30 pr-30" style="border-bottom: 1rpx solid #666;">
          <uv-image width="40" height="40" src="/static/img/auth/3.png" mode="aspectFit" />
          <input v-model="formData.account.value" class="flex-1 pl-30 h-full text-28" type="number" placeholder="请输入手机号码"
            maxlength="11" />
          <button v-if="formData.account.value" @click="formData.account.value = '';" plain
            class="color-[#fff] items-end justify-center text-28 fw-600 b-rounded-0 w-100 h-100 !border-none">
            <uv-icon size="36" color="#a4a4a4" name="close-circle-fill" />
          </button>
        </view>
        <view class="mt-40 pl-30 pr-30 text-28 h-100 flex-row items-center overflow-hidden"
          style="border-bottom: 1rpx solid #666;">
          <uv-image width="40" height="40" src="/static/img/auth/4.png" mode="aspectFit" />
          <input v-model="formData.captcha.value" class="flex-1 pl-30 h-full text-28" type="number" placeholder="请输入验证码"
            maxlength="6" confirm-type="next" />
          <button @click="getCaptcha" :disabled="formData.captcha.disabled" hover-class="op-[0.6]"
            class="lh-66 bg-main color-inverse text-26 fw-600 b-rounded-24 p-0 w-180">
            {{ formData.captcha.text }}
          </button>
        </view>

        <view class="mt-40 pl-30 pr-30 text-28 h-100 flex-row items-center" style="border-bottom: 1rpx solid #666;">
          <uv-image width="40" height="40" src="/static/img/auth/4.png" mode="aspectFit" />
          <input v-model="formData.password.value" class="flex-1 pl-30 h-full text-28"
            :type="formData.password.isVisible ? `text` : `password`" placeholder="请设置安全密码" maxlength="16"
            confirm-type="next" />
          <button @click="formData.password.isVisible = !formData.password.isVisible" plain
            class="color-[#fff] items-end justify-center text-28 fw-600 b-rounded-0 w-100 h-100 !border-none">
            <uv-icon size="36" color="#fff" :name="`${formData.password.isVisible ? `eye-off-outline` : `eye`}`" />
          </button>
        </view>

        <button @click="setPayPassword" hover-class="op-[0.6]" style="margin: 100rpx 0 30rpx;"
          class="bg-primary text-36 color-base fw-700 b-rounded-50 lh-100">确认</button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);

const formData = reactive({
  account: {
    value: "",
    errorMessage: "手机号码输入有误",
    field: "mobile",
    rule: /^1[0-9]{10}$/
  },
  captcha: {
    text: "验证码",
    errorMessage: "验证码输入有误",
    disabled: false,
    count: 60,
    timer: null as any,
    value: "",
    field: "code",
    rule: /^[0-9]{4,6}$/
  },
  password: {
    value: "",
    errorMessage: "安全密码格式应为6位数字",
    field: "pay_pass",
    isVisible: false,
    rule: /^[0-9]{6}$/
  },
});

const countDown = () => {
  const { captcha } = formData;
  captcha.disabled = true;

  const intervalTask = () => {
    captcha.count--;
    captcha.text = `${captcha.count}S`;

    if (captcha.count <= 0) {
      captcha.disabled = false;
      captcha.text = "重新获取";
      captcha.count = 60;
      captcha.timer && clearInterval(captcha.timer);
      captcha.timer = null;
    }
    return intervalTask;
  }
  captcha.timer = setInterval(intervalTask(), 1000);
}

const getCaptcha = () => {
  const { captcha, account } = formData;
  if (captcha.disabled) return;
  uni.showToast({ icon: "loading", mask: true });
  if (!account.rule.test(account.value)) {
    uni.showToast({
      title: account.errorMessage,
      icon: "none",
      mask: true
    });
    return;
  }
  uni.request({
    url: "/sendSms",
    data: {
      mobile: formData.account.value,
      type: "verify",
    },
    success: ({ msg: title }: any) => {
      uni.showToast({ title, icon: "none" })
    }
  });
  countDown();
}

const setPayPassword = () => {
  const data: any = {},
    verification = (<Array<keyof typeof formData>>Object.keys(formData)).every(key => {
      const { value, field, errorMessage: title, rule } = formData[key] as any;

      if (title && !rule.test(String(value))) {
        uni.showToast({ title, icon: "none", duration: 3000 });
        return false;
      }

      field && (data[field] = value);
      return true;
    });

  if (!verification) return;

  uni.showToast({ icon: "loading", mask: true });

  uni.request({
    url: "/forgetPayPass", data,
    success() {
      uni.hideToast();
      uni.showModal({
        title: "密码重置成功！",
        showCancel: false,
        success() {
          uni.navigateBack();
        }
      });
    }
  });
}

</script>

<style lang="scss" scoped>
// scss
::v-deep {
  button[disabled] {
    opacity: 0.6;
  }

  switch {
    transform: scale(0.7);

    .wx-checkbox-input,
    .uni-checkbox-input {

      &:empty,
      &.wx-checkbox-input-checked,
      &.uni-checkbox-input-checked {
        border-color: $uni-bg-color-grey;
        background-color: transparent;
      }

      &:not(:empty) {
        border-color: transparent;
        background: $uni-bg-color-primary;
      }

      border-width: 2px;
      border-radius: 50%;
    }

    &:not([disabled]) {

      .wx-checkbox-input:hover,
      .uni-checkbox-input:hover {
        border-color: $uni-bg-color-grey;
      }
    }
  }
}
</style>